<template>
  <div class="weather-info-box">
    <div class="weather-header-box">
      <div class="goBack">
        <van-icon name="arrow-left" size="20" color="#fff" @click="goBack()" />
      </div>
      <h3>气象环保详情</h3>
    </div>
    <h3>郑州</h3>
    <div id="mychart1" class="chartBox1"></div>
    <p class="weather-info-p">
      <span>
        相对湿度
        <i>49%</i>
      </span>
      <span>
        东北风
        <i>3级</i>
      </span>
    </p>
    <div class="weahter-day">
      <div>
        <span>白天</span>
        <div>
          <img src="@/assets/images/yinyu.png" alt />15℃
        </div>
        <p>
          <span>风力:4-5级</span>
          <span>日出 06:29</span>
        </p>
      </div>
      <div>
        <span>夜间</span>
        <div>
          <img src="@/assets/images/yinyu.png" alt />9℃
        </div>
        <p>
          <span>风力:4-5级</span>
          <span>日落 06:29</span>
        </p>
      </div>
    </div>
    <div class="weather-timeList">
      <div>
        <span>10:00</span>
        <img src="@/assets/images/yinyu.png" alt />
        <i>15℃</i>
      </div>
      <div>
        <span>10:00</span>
        <img src="@/assets/images/yinyu.png" alt />
        <i>15℃</i>
      </div>
      <div>
        <span>10:00</span>
        <img src="@/assets/images/yinyu.png" alt />
        <i>15℃</i>
      </div>
      <div>
        <span>10:00</span>
        <img src="@/assets/images/yinyu.png" alt />
        <i>15℃</i>
      </div>
      <div>
        <span>10:00</span>
        <img src="@/assets/images/yinyu.png" alt />
        <i>15℃</i>
      </div>
      <div>
        <span>10:00</span>
        <img src="@/assets/images/yinyu.png" alt />
        <i>15℃</i>
      </div>
    </div>
    <div class="weather-sevenDays">
      <p>7天天气预报</p>
      <div id="mychart2" class="chartBox2"></div>
    </div>
    <div class="weather-air">
      <P>空气质量</P>
      <div class="weather-chart-content">
        <div class="chartBox">
          <p>污染指数</p>
          <div id="mychart3"></div>
        </div>
        <div class="content">
          <p>
            <span>PM2.5</span>
            <i>41</i>
          </p>
          <p>
            <span>PM10</span>
            <i>41</i>
          </p>
          <p>
            <span>O3</span>
            <i>41</i>
          </p>
          <p>
            <span>NO2</span>
            <i>41</i>
          </p>
          <p>
            <span>SO2</span>
            <i>41</i>
          </p>
          <p>
            <span>CO</span>
            <i>41</i>
          </p>
        </div>
      </div>
      <div class="action">
        <div>
          <div class="img-box">
            <img src="@/assets/images/kouzhao.png" alt />
          </div>
          <p>无需待口罩</p>
        </div>
        <div>
          <div class="img-box">
            <img src="@/assets/images/waichu.png" alt />
          </div>
          <p>适宜外出</p>
        </div>
        <div>
          <div class="img-box">
            <img src="@/assets/images/kaichuang.png" alt />
          </div>
          <p>适宜开窗</p>
        </div>
        <div>
          <div class="img-box">
            <img src="@/assets/images/jinghuaqi.png" alt />
          </div>
          <p>关闭净化器</p>
        </div>
      </div>
    </div>
    <div class="weather-air">
      <P>舒适度</P>
      <div class="weather-chart-content">
        <div class="chartBox">
          <p>相对湿度</p>
          <div id="mychart4"></div>
        </div>
        <div class="content padd120">
          <p>
            <span>体感温度</span>
            <i>25℃</i>
          </p>
          <p>
            <span>紫外线指数</span>
            <i>1</i>
            <i>最弱</i>
          </p>
        </div>
      </div>
    </div>
	<div class="weather-air">
      <P>风力风向</P>
      <div class="weather-chart-content">
        <div class="content-img-box">
			<img src="@/assets/images/fengche.png" alt="">
		</div>
        <div class="content padd120">
          <p>
            <span>风向</span>
            <i>东风</i>
          </p>
          <p>
            <span>风力</span>
            <i>2-3级</i>
          </p>
        </div>
      </div>
    </div>
	<p class="no-more">没有更多了...</p>
	<p class="go-top" ref="goTopBtn" @click="goTop()">返回顶部<img src="@/assets/images/go-top.png"></p>
  </div>
</template>

<script>
import sunny from "@/assets/images/sunny.png";
export default {
  data() {
    return {
      showBgc: true,
      sunny: sunny
    };
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);
    this.myChart1();
    this.myChart2();
    this.myChart3();
    this.myChart4();
  },
  methods: {
     getScroll() {
        this.scrollTop =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;
        let Top =document.documentElement.scrollTop ||window.pageYOffset ||document.body.scrollTop;
        console.log(Top)
       
    },
    goBack() {
      window.history.go(-1);
    },
    myChart1() {
      let myChart = this.$echarts.init(document.getElementById("mychart1"));
      var color_percent0 = "#f9f000";
      var color_percent100 = "#fff";
      var storagePercent = 0.2;
      myChart.setOption({
        legend: {
          show: false
        },
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        },
        title: {
          text: "优",
          x: "center",
          y: "55%",
          textStyle: {
            color: "#fff",
            fontSize: 20
          }
        },
        tooltip: {
          show: false
        },
        series: [
          {
            type: "pie",
            radius: ["90%", "100%"],
            startAngle: 225,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            legendHoverLink: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            color: [
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: color_percent0
                  },
                  {
                    offset: 1,
                    color: color_percent100
                  }
                ]
              },
              "none"
            ],
            data: [
              {
                value: 75,
                name: ""
              },
              {
                value: 25,
                name: ""
              }
            ]
          },

          {
            name: "",
            type: "pie",
            radius: ["90%", "100%"],
            startAngle: 315,
            hoverAnimation: false,
            legendHoverLink: false,
            labelLine: {
              normal: {
                show: false
              }
            },
            clockwise: false,
            z: 2,
            data: [
              {
                name: "",
                value: 17,
                label: {
                  formatter: "\n" + 17 + "℃\n\n{a|大风预警}",
                  position: "center",
                  show: true,
                  color: "#fff",
                  fontSize: 40,
                  fontFamily: "DINCond-Bold",
                  rich: {
                    a: {
                      color: "#fff",
                      fontSize: 13,
                      borderRadius: 6,
                      padding: [5, 10],
                      backgroundColor: "rgba(255,255,255,.3)"
                    }
                  }
                },
                itemStyle: {
                  color: "rgba(255, 255, 255, 1)"
                }
              },
              {
                value: 1,
                name: "",
                itemStyle: {
                  color: "#f9f000",
                  borderColor: "#f9f000",
                  borderWidth: 1
                }
              },
              {
                name: "",
                value: 100 - ((100 - storagePercent * 100) * 270) / 360,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          }
        ]
      });
    },
    myChart2() {
      let myChart = this.$echarts.init(document.getElementById("mychart2"));
      let Data = {
        times: ["昨天", "今天", "明天", "周五", "周六", "周日"],
        timeData: ["12/18", "12/19", "12/20", "12/20", "12/21", "12/22"],
        windxData: ["东南风", "北风", "东南风", "东风", "东南风", "东南风"],
        windsData: ["4级", "2级", "1级", "4级", "2级", "1级"],
        temData: [25.4, 24.3, 24, 23, 22.1, 21.8],
        // rainData: [0, 0, 0, 0, 0, 0],
        humData: [59, 67, 70, 74, 77, 77],
        weather: ["晴", "多云", "多云转晴", "阴", "阴转晴", "阴转小雨"]
      };

      function windDen(wind) {
        switch (wind) {
          case "晴":
            return "n";
          case "多云":
            return "n";
          case "多云转晴":
            return "n";
          case "阴":
            return "n";
          case "阴转晴":
            return "n";
          case "阴转小雨":
            return "n";
          case "雪":
            return "n";
          case "大雪":
            return "n";
          default:
            return "";
        }
      }

      let colors = ["#F1C351", "#24BEE4", "#24BEE4"];
      myChart.setOption({
        color: colors,
        grid: {
          top: "40%",
          bottom: "30%",
          left: "0%",
          right: "0%"
        },
        xAxis: [
          {
            // name: '风力(m/s)/等级',
            type: "category",
            position: "bottom",
            offset: 30,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14,
                backgroundColor: "transparent",
                lineHeight: 20,
                padding: [3, 3]
              },
              interval: 0
            },
            nameTextStyle: { color: "#585858", padding: [0, 0, -53] },
            nameLocation: "start",
            data: Data.windsData
          },
          {
            // name: '风向',
            type: "category",
            position: "bottom",
            offset: 8,
            axisTick: { show: false },
            axisLine: { show: false },
            axisLabel: {
              show: true,
              textStyle: { color: "#fff", fontSize: 14, lineHeight: 20 },
              interval: 0
            },
            nameTextStyle: { color: "#585858", padding: [0, 0, -38] },
            nameLocation: "start",
            data: Data.windxData
          },
          {
            type: "category",
            axisLine: { show: false }
          },
          {
            type: "category",
            position: "top",
            offset: 60,
            axisLabel: {
              textStyle: {
                color: "#fff"
              }
            },
            axisLine: { show: false },
            axisTick: {
              show: false,
              alignWithLabel: true,
              textStyle: { color: "#fff" }
            },
            data: Data.timeData
          },
          {
            type: "category",
            position: "top",
            offset: 30,
            axisLabel: {
              textStyle: {
                color: "#fff"
              },
              formatter: value => {
                console.log(windDen(value));
                return "{" + windDen(value) + "| }";
              },
              rich: {
                value: {
                  lineHeight: 16,
                  align: "left"
                },
                n: {
                  height: 24,
                  align: "center",
                  backgroundColor: {
                    image: this.sunny
                  }
                },
                ne: {
                  height: 24,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915419689-EqosRMRlP.png`
                  }
                },
                e: {
                  height: 24,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915374565-sE5G5rXU6.png`
                  }
                },
                se: {
                  height: 24,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915457742-e5gWU0sT0.png`
                  }
                },
                s: {
                  height: 24,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915473589-TN5oJTIdv.png`
                  }
                },
                sw: {
                  height: 24,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915498319-h9PscokI2.png`
                  }
                },
                w: {
                  height: 16,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915523655-sI1HtlidH.png`
                  }
                },
                nw: {
                  height: 24,
                  align: "left",
                  backgroundColor: {
                    image: `/asset/get/s/data-1567915566043-E6t1OVpNh.png`
                  }
                }
              }
            },
            axisLine: { show: false },
            axisTick: {
              show: false,
              alignWithLabel: true,
              textStyle: { color: "#fff" }
            },
            data: Data.weather
          }
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            name: "温度(°C)",
            scale: true,
            position: "left",
            offset: 54,
            axisTick: {
              show: false,
              lineStyle: { color: colors[0] },
              inside: true
            },
            nameTextStyle: { color: colors[0] },
            axisLabel: { show: false, color: colors[0] },
            splitLine: { show: false }
          },
          {
            show: false,
            type: "value",
            name: "降水(mm)",
            position: "left",
            axisTick: { lineStyle: { color: colors[1] }, inside: true },
            nameTextStyle: { color: colors[1] },
            axisLabel: { color: colors[1] },
            splitLine: { show: false }
          },
          {
            show: false,
            type: "value",
            name: "相对湿度(%)",
            scale: true,
            position: "right",
            axisTick: { lineStyle: { color: colors[2] }, inside: true },
            nameTextStyle: { color: colors[2] },
            axisLabel: { color: colors[2] },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: "温度",
            type: "line",
            step: false,
            label: { normal: { show: true, position: "top", color: "#fff" } },
            symbol: "emptyCircle",
            symbolSize: 6,
            data: Data.temData
          },
          {
            name: "降水",
            type: "bar",
            yAxisIndex: 1,
            color: "#bee6b2",
            barWidth: "50%",
            label: { normal: { show: true, position: "top" } },
            data: Data.rainData
          },
          {
            name: "相对湿度",
            type: "line",
            step: false,
            yAxisIndex: 2,
            color: colors[2],
            symbol: "emptyCircle",
            symbolSize: 6,
            label: { normal: { show: true, position: "top", color: "#fff" } },
            data: Data.humData
          }
        ]
      });
    },
    myChart3() {
      let myChart = this.$echarts.init(document.getElementById("mychart3"));
      let data = {
        value: 82,
        name: "良"
      };
      myChart.setOption({
        title: {
          text: data.name,
          subtext: data.value,
          x: "45%",
          y: "25%",
          textAlign: "center",
          textStyle: {
            fontWeight: "bold",
            fontSize: 12,
            color: "#fff"
          },
          subtextStyle: {
            fontWeight: "bold",
            fontSize: 24,
            color: "#fff"
          }
        },
        data: [
          {
            name: data.name
          }
        ],

        series: [
          {
            // 主圆环
            name: data.name,
            type: "pie",
            radius: ["84%", "98%"],
            startAngle: 225,
            color: [
              {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#BFF75F" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#BFF75F" // 100% 处的颜色
                  }
                ]
              },
              "transparent"
            ],
            hoverAnimation: true,
            legendHoverLink: false,
            z: 10,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: (75 * data.value) / 100
              },
              {
                value: 100 - (75 * data.value) / 100
              }
            ]
          },
          {
            // 背景圆环
            name: "",
            type: "pie",
            radius: ["84%", "98%"],
            silent: true,
            startAngle: 225,
            labelLine: {
              normal: {
                show: false
              }
            },
            z: 5,
            data: [
              {
                value: 75,
                itemStyle: {
                  color: "rgba(255,255,255,.3)"
                }
              },
              {
                value: 25,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          },
          {
            // 底部
            name: "",
            type: "pie",
            radius: ["84%", "98%"],
            startAngle: 230,
            labelLine: {
              show: false
            },
            z: 15,
            silent: true,
            label: {
              show: true,
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 14,
                  padding: [0, -50, 5, 0]
                },
                b: {
                  color: "#fff",
                  fontSize: 14,
                  padding: [0, 0, 10, -70]
                }
              },
              formatter: function(val) {
                // 底部0和100
                if (val.dataIndex === 0) {
                  return "{a|0}";
                }
                if (val.dataIndex === 2) {
                  return "{b|100}";
                }
              }
            },
            data: [
              {
                // 底部两条线
                value: 1,
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: 800,
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: 1,
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: 230,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          }
        ]
      });
    },
    myChart4() {
      let myChart = this.$echarts.init(document.getElementById("mychart4"));
      let data = {
        value: 82,
        name: "良"
      };
      myChart.setOption({
        title: {
          text: data.name,
          subtext: data.value,
          x: "45%",
          y: "25%",
          textAlign: "center",
          textStyle: {
            fontWeight: "bold",
            fontSize: 12,
            color: "#fff"
          },
          subtextStyle: {
            fontWeight: "bold",
            fontSize: 24,
            color: "#fff"
          }
        },
        data: [
          {
            name: data.name
          }
        ],

        series: [
          {
            // 主圆环
            name: data.name,
            type: "pie",
            radius: ["84%", "98%"],
            startAngle: 225,
            color: [
              {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#BFF75F" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#BFF75F" // 100% 处的颜色
                  }
                ]
              },
              "transparent"
            ],
            hoverAnimation: true,
            legendHoverLink: false,
            z: 10,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: (75 * data.value) / 100
              },
              {
                value: 100 - (75 * data.value) / 100
              }
            ]
          },
          {
            // 背景圆环
            name: "",
            type: "pie",
            radius: ["84%", "98%"],
            silent: true,
            startAngle: 225,
            labelLine: {
              normal: {
                show: false
              }
            },
            z: 5,
            data: [
              {
                value: 75,
                itemStyle: {
                  color: "rgba(255,255,255,.3)"
                }
              },
              {
                value: 25,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          },
          {
            // 底部
            name: "",
            type: "pie",
            radius: ["84%", "98%"],
            startAngle: 230,
            labelLine: {
              show: false
            },
            z: 15,
            silent: true,
            label: {
              show: true,
              rich: {
                a: {
                  color: "#fff",
                  fontSize: 14,
                  padding: [0, -50, 5, 0]
                },
                b: {
                  color: "#fff",
                  fontSize: 14,
                  padding: [0, 0, 10, -70]
                }
              },
              formatter: function(val) {
                // 底部0和100
                if (val.dataIndex === 0) {
                  return "{a|0}";
                }
                if (val.dataIndex === 2) {
                  return "{b|100}";
                }
              }
            },
            data: [
              {
                // 底部两条线
                value: 1,
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: 800,
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: 1,
                itemStyle: {
                  color: "transparent"
                }
              },
              {
                value: 230,
                itemStyle: {
                  color: "transparent"
                }
              }
            ]
          }
        ]
      });
    },
     goTop(){
       document.documentElement.scrollTop=0
       window.pageYOffset=0
       document.body.scrollTop=0
     }
  }
};
</script>

<style lang="less" scoped>
.weather-info-box {
  overflow-y: scroll;
  padding: 0 20/7.5vw;
  padding-top: 108/7.5vw;
  background-image: linear-gradient(
    -45deg,
    rgb(37, 240, 234) 0%,
    rgb(31, 215, 157) 100%
  );
  background-image: -moz-linear-gradient(
    -45deg,
    rgb(37, 240, 234) 0%,
    rgb(31, 215, 157) 100%
  );
  background-image: -webkit-linear-gradient(
    -45deg,
    rgb(37, 240, 234) 0%,
    rgb(31, 215, 157) 100%
  );
  background-image: -ms-linear-gradient(
    -45deg,
    rgb(37, 240, 234) 0%,
    rgb(31, 215, 157) 100%
  );
  box-sizing: border-box;
  color: #fff;

  > h3 {
    color: #fff;
    font-size: 36/7.5vw;
  }
  .weather-header-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 88/7.5vw;
    box-sizing: border-box;
    text-align: center;
    z-index: 99;
    background-color: #20daa6;
    h3 {
      color: #fff;
      font-size: 36/7.5vw;
      font-family: PingFang SC;
      line-height: 88/7.5vw;
      margin: 0;
    }

    .goBack {
      position: absolute;
      left: 20/7.5vw;
      top: 50%;
      width: 50/7.5vw;
      height: 50/7.5vw;
      transform: translateY(-50%);
      color: #ccc;
    }
  }
  .chartBox1 {
    margin-top: 40/7.5vw;
    width: 100%;
    height: 380/7.5vw;
  }
  .weather-info-p {
    text-align: center;
    font-size: 32/7.5vw;
    line-height: 72/7.5vw;
    > span {
      margin-right: 40/7.5vw;
      &:last-child {
        margin-right: 0;
      }
      i {
        margin-left: 20/7.5vw;
      }
    }
  }
  .weahter-day {
    padding: 0 20/7.5vw;
    display: flex;
    justify-content: space-between;
    margin: 30/7.5vw 0 50/7.5vw 0;
    > div {
      position: relative;
      flex: 1;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 6/7.5vw;
      padding: 0 10/7.5vw;
      > span {
        position: absolute;
        top: 10/7.5vw;
        right: 10/7.5vw;
        font-size: 24/7.5vw;
      }
      > div {
        font-size: 48/7.5vw;
        margin: 20/7.5vw 0;
        img {
          width: 65/7.5vw;
          vertical-align: middle;
        }
      }
      > p {
        display: flex;
        justify-content: space-between;
        font-size: 24/7.5vw;
      }
      &:nth-of-type(1) {
        margin-right: 30/7.5vw;
      }
    }
  }
  .weather-timeList {
    display: flex;
    justify-content: space-between;
    padding: 20/7.5vw 10/7.5vw;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-left: 0;
    border-right: 0;
    > div {
      flex: 1;
      display: flex;
      flex-direction: column;
      text-align: center;
      > span {
        font-size: 24/7.5vw;
      }
      > img {
        display: block;
        margin: 50/7.5vw auto 30/7.5vw;
        width: 45/7.5vw;
      }
      > i {
        font-size: 28/7.5vw;
      }
    }
  }
  .weather-sevenDays {
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    p {
      font-size: 36/7.5vw;
      line-height: 72/7.5vw;
      margin-top: 20/7.5vw;
    }
    .chartBox2 {
      width: 100%;
      height: 460/7.5vw;
    }
  }
  .weather-air {
	  padding-bottom:20/7.5vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    p {
      font-size: 36/7.5vw;
      line-height: 72/7.5vw;
      margin-top: 20/7.5vw;
	}
	
    .weather-chart-content {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 300/7.5vw;
      >.content-img-box{
        width: 240/7.5vw;
        margin-top:20/7.5vw;
        >img{
          display: block;
          width: 100%;
        }
      }
      .chartBox {
        width: 240/7.5vw;
        display: flex;
        flex-direction: column;
        text-align: center;
        > p {
          font-size: 28/7.5vw;
        }
        > div {
          flex: 1;
        }
      }
      .content {
        flex: 1;
		    margin-left: 120/7.5vw;
        > p {
          line-height: 26/7.5vw;
          font-size: 28/7.5vw;
          > span {
            display: inline-block;
            min-width: 86/7.5vw;
            margin-right: 40/7.5vw;
            color: rgba(255, 255, 255, 0.8);
          }
          > i {
            display: inline-block;
            min-width: 50/7.5vw;
          }
        }
      }
    }
    .action {
      display: flex;
      justify-content: space-around;
      margin-top: 60/7.5vw;
      > div {
        > .img-box {
          overflow: hidden;
          height: 70/7.5vw;
        }
        > p {
          font-size: 28/7.5vw;
          line-height: 50/7.5vw;
        }
        &:nth-of-type(1) {
          img {
            display: block;
            width: 62/7.5vw;
            margin: 0 auto;
            margin-top: 20/7.5vw;
          }
        }
        &:nth-of-type(2) {
          img {
            display: block;
            width: 44/7.5vw;
            margin: 0 auto;
          }
        }
        &:nth-of-type(3) {
          img {
            display: block;
            width: 55/7.5vw;
            margin: 0 auto;
          }
        }
        &:nth-of-type(4) {
          img {
            display: block;
            width: 50/7.5vw;
            margin: 0 auto;
          }
        }
      }
    }
  }
  .no-more{
	  text-align: center;
	  line-height: 72/7.5vw;
	  color: rgba(255, 255, 255, 0.8);
	  font-size: 28/7.5vw;
  }
  .go-top{
	  font-size: 28/7.5vw;
	  margin-top:50/7.5vw;
	  line-height: 72/7.5vw;
	  text-align: center;
	  img{
		  width: 22/7.5vw;
		  margin-left: 10/7.5vw;
      vertical-align: middle;
      margin-bottom:10/7.5vw;
	  }
  }
}

.padd120{
	padding:120/7.5vw 0;
}
</style>
